<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width" name="viewport">
    <title></title>
    <script src="/common/vue.min.js"></script>
    <script src="/common/axios.min.js"></script>
    <script src="/common/jquery-2.1.1.js"></script>
    <script src="/common/iscroll.js"></script>
    <link rel="stylesheet" href="/wap/course/info/index.css">
    <link rel="stylesheet" type="text/css" href="/wap/course/info/font/1/iconfont.css">
    <style>
        .prism-time-display{
            line-height: .28rem!important;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="Player" style="overflow: hidden">
        <div id='J_prismPlayer' class='prism-player' style="position: absolute;left:0;width:100%;font-size: .2rem"></div>
    </div>
    <div id="head" v-if="sucShow">
        <div class="headers demo1">
            <p class="title active" v-text="contents.name"></p>
            <span class="times" v-text="contents.publishDate"></span>
            <span class="number">阅读<i class="num" v-text="contents.readNum"></i></span>
            <span :class="titIcon" @click="titIcons"><i class="iconfont icon-shang"></i></span>
        </div>
        <section :class="tBody"  id="t-body"  v-html="chartext"></section>
		<div class="hour" v-if="messageWord">
            <header class="hour-head">共有<span v-text="iscord.length"></span>个课时</header>
            <div id="wrapper">
                <div id="scroller">
                    <ul>
                        <li v-for="item in iscord" @click="ssdd(item)">
                            <img :src="item.mainImg.path" alt="">
                            <div class="hourMb" v-if="contents.id === item.id">学习中</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="reprint">
            <p class="reprint-name">THANK YOU</p>
            <span class="reprint-text">股神院APP原创作品, 欢迎转载, 转载需授权</span>
        </div>

    </div>
    <div class="message" v-if="sucShow">
        <p class="message-name">精选留言</p>
        <span class="message-word clear" @click="alertSat" v-if="messageWord">
                <img class="message-word-img" src="/wap/course/info/images/ico-11.png" alt="">
                <span class="message-word-input">写留言</span>
            </span>
        <ul class="message-ul clear">
            <li class="message-list clear" v-for="item in contents.comments">
                <img class="message-list-img" :src="item.user.avatar" alt="">
                <div class="message-list-bag">
                    <div class="message-t">
                        <p v-text="item.user.nickName"></p>
                    </div>
                    <p class="message-text" v-text="item.body"></p>
                    <span class="message-time" v-text="item.commentDate"></span>
                    <ul class="message-reply clear" v-if="item.authorComment !== ''">
                        <li class="message-reply-list">
                            <span class="message-reply-name">作者回复</span>
                            <p class="message-reply-text" v-text="item.authorComment"></p>
                            <span class="message-reply-time" v-text="item.authorCommentDate"></span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--留言开始-->

<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>

<img id="loading" src="/wap/analysis/images/load.jpg">
<script src="/wap/analysis/index.js"></script>
<script>
    var imageUrl = [];
    /*视频详情*/
    var video = new Vue({
        el: '#video',
        data: {
            contents: {},
            reward: false,
            titIcon: 'titIcon',
            titIconNum: false,
            chartext:'',
            chartNum: 0,
            messageWord: true,
            tBody: 't-body demo1',
            x5_video_position: {
                type: String,
                default: "top"
            },
            x5_type: {
                type: String,
                default: "h5"
            },
            x5_fullscreen: {
                type: Boolean,
                default: false
            },
            x5_orientation: {
                type: Number,
                default: 2
            },
            sucShow:false,
            iscord: []
        },
        methods: {
            /*页面数据获取*/
            getNew: function (i) {
                var zxc = this;
                axios.post(baseUrl + 'api/app/section/info/' + id, {}).then(function (response) {
                    zxc.contents = response.data.data;
                    document.title = response.data.data.name;
                    if(i===null){
                        zxc.postFall();
                        zxc.messageWord = false;
                    }
					if(response.data.code===20000){
						load();
					}
					if(zxc.chartNum === 0){
						zxc.chartext = response.data.data.content;
						zxc.chartNum++;
						text();
					}
					axios.post(baseUrl + 'api/app/section/list', {page: 1, size: 1000, data: {courseId: Number(response.data.data.cid)}}).then(function (response) {
						zxc.iscord = response.data.data.content;
						$('#scroller').width(zxc.iscord.length * 5.84 + 'rem');
						loaded();
					}).catch(function (error) {
						console.log(error);
					});
                }).catch(function (error) {
                    console.log(error);
                });
            },
			ssdd : function (val) {
                alert(JSON.stringify({
						video:{
							sid: val.id,
							videoId: val.attach.videoId
						}
                    })
                )
            },
            /*下啦*/
            titIcons: function () {
                if (this.titIconNum) {
                    this.titIcon = 'titIcon';
                    this.tBody = 't-body demo1';
                    this.titIconNum = false;
                } else {
                    this.titIcon = 'titIcon active';
                    this.tBody = 't-body active';
                    this.titIconNum = true;
                }
            },
            alertSat: function () {
                alert(JSON.stringify({
                        type: "native",
                        target: {
                            name: "comment_dialog",
                            config: {
                                body: true,
                                image: false
                            },
                            request: {
                                url: baseUrl + "api/app/section/comment",
                                method: "POST",
                                data: {
                                    sectionId: this.contents.id,
                                    body: ""
                                }
                            }
                        },
                        params: {
                            headTitle: this.contents.title,
                            subTitle: ""
                        }
                    })
                )
            },
            fall: function () {
                var _this = this;
                axios.post(baseUrl + 'api/app/section/play/auth', {
                    videoId: _this.contents.attach.videoId,
                    sid: _this.contents.id
                }).then(function (response) {
                    console.log(response);
                    _this.paly(response.data.data);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            paly: function (data) {
                var _this = this;
                this.player = new Aliplayer({
                    id: "J_prismPlayer", // 容器id
                    vid : data.videoMeta.videoId,
                    playauth : data.playAuth,
                    width:"100%",
                    height:"400px",
                    autoplay: true,
                    isLive:false,
                    playsinline:true,
                    controlBarVisibility:"always",
                    useH5Prism:false,
                    useFlashPrism:false,
                    x5_video_position: _this.x5_video_position,
                    x5_type: _this.x5_type,
                    x5_fullscreen: _this.x5_fullscreen,
                    x5_orientation: _this.x5_orientation,
                    cover:""
                });
                document.getElementById('Player').style.height = '400px';
            },
            postFall:function () {
                var head= document.getElementsByTagName('head')[0];
                var script= document.createElement('script');
                script.type= 'text/javascript';
                script.src= 'https://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-min.js';
                var css= document.createElement('link');
                css.rel= 'stylesheet';
                css.href= 'https://g.alicdn.com/de/prismplayer/2.2.0/skins/default/aliplayer-min.css';
                head.appendChild(script);
                head.appendChild(css);
                this.fall()
            }
        },
        created: function () {
            if(GetQueryString('pc') !== null || typeof(GetQueryString('pc') === "undefined")){
                this.getNew(GetQueryString('pc'));
            }else{
                this.getNew();
            }
        },
        updated: function () {
            for (var i = 0; i < document.getElementsByClassName('t-body')[0].getElementsByTagName("img").length; i++) {
                document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].setAttribute('i', i);
                document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].onclick = clickImg;
                imageUrl.push(document.getElementsByClassName('t-body')[0].getElementsByTagName("img")[i].src)
            }
        },
        mounted: function () {
            var _this = this;
            _this.$nextTick(function () {
                _this.sucShow = true;
            })
        },
        filters: {
            data: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            }
        }
    });

    function clickImg() {
        var _this = this;
		if(app.messageWord){
			alert(JSON.stringify({
				images: imageUrl,
				num: _this.getAttribute('i')
			}));
		}
    }
    function load() {
        $('#loading,#content,#video').addClass('active')
    }
    function text() {
        var see = setTimeout(function () {
            if(($('#t-body').children().length)>0){
                clearTimeout(see);
                $('#t-body').find('*').each(function () {
                    this.style.fontSize = (parseInt(this.style.fontSize))/25 + 'rem';
                    this.style.marginTop = (parseInt(this.style.marginTop))/25 + 'rem';
                    this.style.marginBottom = (parseInt(this.style.marginBottom))/25 + 'rem';
                    this.style.marginLeft = (parseInt(this.style.marginLeft))/25 + 'rem';
                    this.style.marginRight = (parseInt(this.style.marginRight))/25 + 'rem';
                    this.style.paddingTop = (parseInt(this.style.paddingTop))/25 + 'rem';
                    this.style.paddingBottom = (parseInt(this.style.paddingBottom))/25 + 'rem';
                    this.style.paddingLeft = (parseInt(this.style.paddingLeft))/25 + 'rem';
                    this.style.paddingRight = (parseInt(this.style.paddingRight))/25 + 'rem';
                    this.style.letterSpacing = (parseInt(this.style.letterSpacing))/25 + 'rem';
                    this.style.height = (parseInt(this.style.height))/25 + 'rem';
                });
            }
        },100);
    }
	function loaded () {
        var myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
    }
</script>
</body>
</html>